<template>
  <div class="h-87">
    <div id="demo">
      <div id="demoMap"></div>
      <div class="rightTable">table</div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import 'echarts/map/js/world.js'
import { color } from 'echarts/lib/export'
export default {
  name: 'demo',
  data() {
    return {
      colorMapData: [
        {
          name: '中国',
          value: 77
        }, //亚洲
        {
          name: '朝鲜',
          value: 1
        },
        {
          name: '蒙古',
          value: 1
        },
        {
          name: '越南',
          value: 1
        },
        {
          name: '泰国',
          value: 1
        },
        {
          name: '柬埔寨',
          value: 1
        },
        {
          name: '尼泊尔',
          value: 1
        },
        {
          name: '缅甸',
          value: 1
        },
        {
          name: '印度',
          value: 1
        },
        {
          name: '斯里兰卡',
          value: 1
        },
        {
          name: '巴基斯坦',
          value: 1
        },
        {
          name: '塔吉克斯坦',
          value: 1
        },
        {
          name: '吉尔吉斯斯坦',
          value: 1
        },
        {
          name: '乌兹别克斯坦',
          value: 1
        },
        {
          name: '土库曼斯坦',
          value: 1
        },
        {
          name: '哈萨克斯坦',
          value: 1
        },
        {
          name: '老挝',
          value: 1
        },
        {
          name: '阿富汗',
          value: 1
        },
        {
          name: '菲律宾',
          value: 1
        },
        {
          name: '新加坡',
          value: 5
        },
        {
          name: '印尼',
          value: 2
        },
        {
          name: '韩国',
          value: 1
        },
        {
          name: '黎巴嫩',
          value: 3
        },
        {
          name: '伊拉克',
          value: 1
        },
        {
          name: '孟加拉国',
          value: 1
        },
        {
          name: '伊朗',
          value: 1
        },
        {
          name: '土耳其',
          value: 1
        },
        {
          name: '叙利亚',
          value: 1
        },
        {
          name: '阿联酋',
          value: 1
        },
        {
          name: '马来西亚',
          value: 1
        },
        {
          name: '日本',
          value: 1
        },
        {
          name: '以色列',
          value: 1
        },
        {
          name: '卡塔尔',
          value: 1
        },
        {
          name: '巴林',
          value: 5
        },
        {
          name: '沙特阿拉伯',
          value: 1
        },
        {
          name: '亚美尼亚',
          value: 3
        },
        {
          name: '科威特',
          value: 1
        },
        {
          name: '塞浦路斯',
          value: 3
        },
        {
          name: '阿曼',
          value: 1
        },
        {
          name: '格鲁吉亚',
          value: 3
        },
        {
          name: '阿塞拜疆',
          value: 1
        },
        {
          name: '文莱',
          value: 5
        },
        {
          name: '不丹',
          value: 1
        },
        {
          name: '约旦',
          value: 1
        },
        {
          name: '也门',
          value: 1
        },
        {
          name: '东帝汶',
          value: 1
        },
        {
          name: '卢旺达',
          value: 25
        }, //非洲
        {
          name: '布隆迪',
          value: 25
        },
        {
          name: '乌干达',
          value: 25
        },
        {
          name: '埃塞俄比亚',
          value: 25
        },
        {
          name: '马达加斯加',
          value: 25
        },
        {
          name: '海地',
          value: 25
        },
        {
          name: '肯尼亚',
          value: 25
        },
        {
          name: '索马里',
          value: 25
        },
        {
          name: '厄立特里亚',
          value: 25
        },
        {
          name: '布基纳法索',
          value: 25
        },
        {
          name: '马拉维',
          value: 25
        },
        {
          name: '埃及',
          value: 25
        },
        {
          name: '塞拉利昂',
          value: 25
        },
        {
          name: '坦桑尼亚',
          value: 25
        },
        {
          name: '尼日利亚',
          value: 25
        },
        {
          name: '尼日尔',
          value: 25
        },
        {
          name: '毛里塔尼亚',
          value: 25
        },
        {
          name: '喀麦隆',
          value: 25
        },
        {
          name: '贝宁',
          value: 25
        },
        {
          name: '摩洛哥',
          value: 25
        },
        {
          name: '马里',
          value: 25
        },
        {
          name: '刚果民主共和国',
          value: 25
        },
        {
          name: '几内亚',
          value: 25
        },
        {
          name: '利比里亚',
          value: 25
        },
        {
          name: '多哥',
          value: 25
        },
        {
          name: '毛里求斯',
          value: 25
        },
        {
          name: '莫桑比克',
          value: 25
        },
        {
          name: '阿尔及利亚',
          value: 25
        },
        {
          name: '斯威士兰',
          value: 25
        },
        {
          name: '乍得',
          value: 25
        },
        {
          name: '塞内加尔',
          value: 25
        },
        {
          name: '津巴布韦',
          value: 25
        },
        {
          name: '科特迪瓦',
          value: 25
        },
        {
          name: '赞比亚',
          value: 25
        },
        {
          name: '突尼斯',
          value: 25
        },
        {
          name: '加纳',
          value: 25
        },
        {
          name: '中非共和国',
          value: 25
        },
        {
          name: '安哥拉',
          value: 25
        },
        {
          name: '冈比亚',
          value: 25
        },
        {
          name: '刚果共和国',
          value: 25
        },
        {
          name: '苏丹',
          value: 25
        },
        {
          name: '加蓬',
          value: 25
        },
        {
          name: '利比亚',
          value: 25
        },
        {
          name: '南非',
          value: 25
        },
        {
          name: '纳米比亚',
          value: 25
        },
        {
          name: '博茨瓦纳',
          value: 25
        },
        {
          name: '南苏丹',
          value: 25
        },
        {
          name: '索马里兰',
          value: 25
        },
        {
          name: '赤道几内亚',
          value: 25
        },
        {
          name: '几内亚比绍',
          value: 25
        },
        {
          name: '西撒哈拉',
          value: 25
        },
        {
          name: '莱索托',
          value: 25
        },
        {
          name: '吉布提',
          value: 25
        },
        {
          name: '俄罗斯',
          value: 15
        }, //欧洲
        {
          name: '波兰',
          value: 15
        },
        {
          name: '希腊',
          value: 15
        },
        {
          name: '马其顿',
          value: 15
        },
        {
          name: '阿尔巴尼亚',
          value: 15
        },
        {
          name: '西班牙',
          value: 15
        },
        {
          name: '克罗地亚',
          value: 15
        },
        {
          name: '瑞士',
          value: 15
        },
        {
          name: '英国',
          value: 15
        },
        {
          name: '爱尔兰',
          value: 15
        },
        {
          name: '意大利',
          value: 15
        },
        {
          name: '荷兰',
          value: 15
        },
        {
          name: '黑山',
          value: 15
        },
        {
          name: '斯洛文尼亚',
          value: 15
        },
        {
          name: '德国',
          value: 15
        },
        {
          name: '卢森堡',
          value: 15
        },
        {
          name: '葡萄牙',
          value: 15
        },
        {
          name: '塞尔维亚',
          value: 15
        },
        {
          name: '法国',
          value: 15
        },
        {
          name: '奥地利',
          value: 15
        },
        {
          name: '捷克共和国',
          value: 15
        },
        {
          name: '斯洛伐克',
          value: 15
        },
        {
          name: '拉脱维亚',
          value: 15
        },
        {
          name: '挪威',
          value: 15
        },
        {
          name: '比利时',
          value: 15
        },
        {
          name: '丹麦',
          value: 15
        },
        {
          name: '匈牙利',
          value: 15
        },
        {
          name: '瑞典',
          value: 15
        },
        {
          name: '罗马尼亚',
          value: 15
        },
        {
          name: '保加利亚',
          value: 15
        },
        {
          name: '立陶宛',
          value: 15
        },
        {
          name: '爱沙尼亚',
          value: 15
        },
        {
          name: '白俄罗斯',
          value: 15
        },
        {
          name: '摩尔多瓦',
          value: 15
        },
        {
          name: '芬兰',
          value: 15
        },
        {
          name: '乌克兰',
          value: 15
        },
        {
          name: '科索沃',
          value: 15
        },
        {
          name: '波黑',
          value: 15
        },
        {
          name: '哥斯达黎加',
          value: 32
        }, //北美洲
        {
          name: '萨尔瓦多',
          value: 32
        },
        {
          name: '多米尼加',
          value: 32
        },
        {
          name: '危地马拉',
          value: 32
        },
        {
          name: '洪都拉斯',
          value: 32
        },
        {
          name: '巴拿马',
          value: 32
        },
        {
          name: '古巴',
          value: 32
        },
        {
          name: '牙买加',
          value: 32
        },
        {
          name: '墨西哥',
          value: 32
        },
        {
          name: '波多黎各',
          value: 32
        },
        {
          name: '特立尼达和多巴哥',
          value: 32
        },
        {
          name: '伯利兹',
          value: 32
        },
        {
          name: '加拿大',
          value: 32
        },
        {
          name: '美国',
          value: 32
        },
        {
          name: '巴哈马',
          value: 32
        },
        {
          name: '格陵兰',
          value: 32
        },
        {
          name: '哥伦比亚',
          value: 88
        }, //南美洲
        {
          name: '尼加拉瓜',
          value: 88
        },
        {
          name: '厄瓜多尔',
          value: 88
        },
        {
          name: '秘鲁',
          value: 88
        },
        {
          name: '委内瑞拉',
          value: 88
        },
        {
          name: '玻利维亚',
          value: 88
        },
        {
          name: '巴西',
          value: 88
        },
        {
          name: '智利',
          value: 88
        },
        {
          name: '苏里南',
          value: 88
        },
        {
          name: '乌拉圭',
          value: 88
        },
        {
          name: '巴拉圭',
          value: 88
        },
        {
          name: '圭亚那',
          value: 88
        },
        {
          name: '阿根廷',
          value: 88
        },
        {
          name: '澳大利亚',
          value: 7
        }, //大洋洲
        {
          name: '巴布亚新几内亚',
          value: 7
        },
        {
          name: '斐济',
          value: 7
        },
        {
          name: '新喀里多尼亚',
          value: 7
        },
        {
          name: '新西兰',
          value: 7
        },
        {
          name: '北马里亚纳',
          value: 7
        }
      ],
      dataPin: [
        {
          name: '中国',
          value: '138.9'
        },
        {
          name: '美国',
          value: '138.9'
        },
        {
          name: '朝鲜',
          value: '138.9'
        },
        {
          name: '俄罗斯',
          value: '138.9'
        },
        {
          name: '日本',
          value: '138.9'
        },
        {
          name: '韩国',
          value: '138.9'
        }
      ],
      data: [
        { name: '加拿大', value: 199 },
        { name: '中国', value: 1 },
        { name: '俄罗斯', value: 102 }
      ],
      geoCoordMap: {
        芬兰: [24.909912, 60.169095],
        美国: [-100.696295, 33.679979],
        日本: [139.710164, 35.706962],
        韩国: [126.979208, 37.53875],
        瑞士: [7.445147, 46.956241],
        东南亚: [117.53244, 5.300343],
        澳大利亚: [135.193845, -25.304039],
        德国: [13.402393, 52.518569],
        英国: [-0.126608, 51.208425],
        加拿大: [-102.646409, 59.994255],
        利比亚: [13.07, 32.49],
        中国: [37.35, 55.45]
      }
    }
  },
  methods: {
    convertData(data) {
      var res = []
      for (var i = 0; i < data.length; i++) {
        var geoCoord = this.geoCoordMap[data[i].name]
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          })
        }
      }
      console.log(res)
      return res
    },
    map() {
      //获取世界地图数据
      var mapFeatures = echarts.getMap('world').geoJson.features
      mapFeatures.forEach(function (v) {
        // 国家名称
        // console.log(v.properties.name)
        // 地区经纬度
        // geoCoordMap[name] = v.properties.cp
      })

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('demoMap'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: ''
        },
        tooltip: {
          padding: 0,
          enterable: true,
          transitionDuration: 1,
          textStyle: {
            color: '#000',
            decoration: 'none'
          },
          backgroundColor: 'rgba(0,0,0,0)',
          // position: function (point, params, dom, rect, size) {
          //   return [point[0], point[1]];
          // },
          formatter: function (params) {
            // console.log(params.value)
            console.log(params)
            if (params.data != undefined) {
              var tipHtml = ''
              tipHtml =
                '<div style="width:210px;height:143px;border-radius:10px;">' +
                '<p style="height:46px;line-height:46px;width:100%;background:#1D3148;color:white;padding-left:20px;border-radius:10px 10px 0 0;">' +
                params.name +
                '</p>' +
                '<div style="height:95px;width:100%;background:rgba(18, 33, 53, 0.85);border-radius:0 0 10px 10px;">' +
                '<p style="padding:10px 20px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #E9F7FF;line-height: 20px;">' +
                '产奶量：' +
                '<span style="font-size: 22px;font-family: YouSheBiaoTiHei;color: #3CB5FF;line-height: 24px;text-shadow: 0px 1px 8px rgba(23, 158, 240, 0.5);background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">' +
                params.data.value[2] +
                '</span>' +
                '万吨' +
                '</p>' +
                '<p style="padding:10px 20px;font-size: 14px;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #E9F7FF;line-height: 20px;">' +
                '占比：' +
                '<span style="font-size: 22px;font-family: YouSheBiaoTiHei;color: #3CB5FF;line-height: 24px;text-shadow: 0px 1px 8px rgba(23, 158, 240, 0.5);background: linear-gradient(180deg, #FFFFFF 0%, #3CB5FF 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;">' +
                params.data.value[2] +
                '</span>' +
                '%' +
                '</p>' +
                '</div>' +
                '</div>'

              return tipHtml
            } else {
              return ''
            }
          }
        },
        visualMap: {
          type: 'piecewise',
          min: 1,
          max: 5,
          pieces: [
            {
              gt: 70,
              lt: 80, //中国大陆
              color: 'rgba(71, 188, 206, 0.7)'
            },
            {
              gt: 40,
              lt: 60
            }, // (41, Infinity] 一带一路
            {
              gt: 30,
              lte: 40,
              color: 'rgba(24, 216, 177, 0.4)'
            }, // (31, 40]  北美
            {
              gt: 80,
              lte: 90,
              color: 'rgba(233, 208, 23, 0.4)'
            }, //南美
            {
              gt: 20,
              lte: 30,
              color: 'rgba(246, 142, 72, 0.4)'
            }, // (21, 30]  非洲
            {
              gt: 10,
              lte: 20,
              color: 'rgba(102, 71, 255, 0.4)'
            }, // (11, 20]  欧洲
            {
              gt: 5,
              lte: 10
            }, // (6, 10]   大洋洲
            {
              lt: 5,
              color: 'rgba(60, 181, 255, 0.4)'
            } // (-Infinity, 5) 亚洲
          ],
          text: ['High', 'Low'],
          show: false
        },
        geo: {
          label: {
            normal: {
              show: false
            },
            emphasis: {
              show: false
            }
          },
          roam: false,
          itemStyle: {
            normal: {
              areaColor: 'red',
              borderColor: '#1180c7'
            },
            emphasis: {
              areaColor: '#4499d0'
            }
          }
        },
        series: [
          {
            type: 'map',
            mapType: 'world',
            coordinateSystem: 'geo',
            zoom: 1.2,
            mapLocation: {
              y: 100
            },
            itemStyle: {
              emphasis: { label: { show: false } }
            },
            // 对应生成地图颜色板块数据
            nameMap: {
              Afghanistan: '阿富汗',
              Albania: '阿尔巴尼亚',
              Algeria: '阿尔及利亚',
              Andorra: '安道尔',
              Angola: '安哥拉',
              Antarctica: '南极洲',
              'Antigua and Barbuda': '安提瓜和巴布达',
              Argentina: '阿根廷',
              Armenia: '亚美尼亚',
              Australia: '澳大利亚',
              Austria: '奥地利',
              Azerbaijan: '阿塞拜疆',
              'The Bahamas': '巴哈马',
              Bahrain: '巴林',
              Bangladesh: '孟加拉国',
              Barbados: '巴巴多斯',
              Belarus: '白俄罗斯',
              Belgium: '比利时',
              Belize: '伯利兹',
              Benin: '贝宁',
              Bermuda: '百慕大',
              Bhutan: '不丹',
              Bolivia: '玻利维亚',
              'Bosnia and Herz.': '波黑',
              Botswana: '博茨瓦纳',
              Brazil: '巴西',
              Brunei: '文莱',
              Bulgaria: '保加利亚',
              'Burkina Faso': '布基纳法索',
              Burundi: '布隆迪',
              Bahamas: '巴哈马国',
              Cambodia: '柬埔寨',
              Cameroon: '喀麦隆',
              Canada: '加拿大',
              'Cape Verde': '佛得角',
              'Central African Rep.': '中非共和国',
              Chad: '乍得',
              Chile: '智利',
              China: '中国',
              Colombia: '哥伦比亚',
              Comoros: '科摩罗',
              Congo: '刚果共和国',
              'Costa Rica': '哥斯达黎加',
              Croatia: '克罗地亚',
              Cuba: '古巴',
              Cyprus: '塞浦路斯',
              'Czech Rep.': '捷克共和国',
              "Côte d'Ivoire": '科特迪瓦',
              Denmark: '丹麦',
              Djibouti: '吉布提',
              'Dominican Rep.': '多米尼加',
              'Dominican Republic': '多明尼加共和国',
              Ecuador: '厄瓜多尔',
              Egypt: '埃及',
              'El Salvador': '萨尔瓦多',
              'Eq. Guinea': '赤道几内亚',
              Eritrea: '厄立特里亚',
              Estonia: '爱沙尼亚',
              Ethiopia: '埃塞俄比亚',
              'Falkland Islands': '福克兰群岛',
              'Faroe Islands': '法罗群岛',
              Fiji: '斐济',
              Finland: '芬兰',
              France: '法国',
              'French Guiana': '法属圭亚那',
              'French Southern and Antarctic Lands': '法属南半球和南极领地',
              Gabon: '加蓬',
              Gambia: '冈比亚',
              'Gaza Strip': '加沙',
              Georgia: '格鲁吉亚',
              Germany: '德国',
              Ghana: '加纳',
              Greece: '希腊',
              Greenland: '格陵兰',
              Grenada: '格林纳达',
              Guadeloupe: '瓜德罗普',
              Guatemala: '危地马拉',
              Guinea: '几内亚',
              'Guinea-Bissau': '几内亚比绍',
              Guyana: '圭亚那',
              Haiti: '海地',
              Honduras: '洪都拉斯',
              'Hong Kong': '香港',
              Hungary: '匈牙利',
              Iceland: '冰岛',
              India: '印度',
              Indonesia: '印尼',
              Iran: '伊朗',
              Iraq: '伊拉克',
              'Iraq-Saudi Arabia Neutral Zone': '伊拉克阿拉伯中立区',
              Ireland: '爱尔兰',
              'Isle of Man': '马恩岛',
              Israel: '以色列',
              Italy: '意大利',
              'Ivory Coast': '科特迪瓦',
              Jamaica: '牙买加',
              'Jan Mayen': '扬马延岛',
              Japan: '日本',
              Jordan: '约旦',
              Kazakhstan: '哈萨克斯坦',
              Kenya: '肯尼亚',
              Kerguelen: '凯尔盖朗群岛',
              Kiribati: '基里巴斯',
              'Dem. Rep. Korea': '朝鲜',
              Korea: '韩国',
              Kuwait: '科威特',
              Kyrgyzstan: '吉尔吉斯斯坦',
              'Lao PDR': '老挝',
              Latvia: '拉脱维亚',
              Lebanon: '黎巴嫩',
              Lesotho: '莱索托',
              Liberia: '利比里亚',
              Libya: '利比亚',
              Liechtenstein: '列支敦士登',
              Lithuania: '立陶宛',
              Luxembourg: '卢森堡',
              Macau: '澳门',
              Macedonia: '马其顿',
              Madagascar: '马达加斯加',
              Malawi: '马拉维',
              Malaysia: '马来西亚',
              Maldives: '马尔代夫',
              Mali: '马里',
              Malta: '马耳他',
              Martinique: '马提尼克',
              Mauritania: '毛里塔尼亚',
              Mauritius: '毛里求斯',
              Mexico: '墨西哥',
              Moldova: '摩尔多瓦',
              Monaco: '摩纳哥',
              Mongolia: '蒙古',
              Morocco: '摩洛哥',
              Mozambique: '莫桑比克',
              Myanmar: '缅甸',
              Namibia: '纳米比亚',
              Nepal: '尼泊尔',
              Netherlands: '荷兰',
              'New Caledonia': '新喀里多尼亚',
              'New Zealand': '新西兰',
              Nicaragua: '尼加拉瓜',
              Niger: '尼日尔',
              Nigeria: '尼日利亚',
              'Northern Mariana Islands': '北马里亚纳群岛',
              Norway: '挪威',
              Oman: '阿曼',
              Pakistan: '巴基斯坦',
              Panama: '巴拿马',
              'Papua New Guinea': '巴布亚新几内亚',
              Paraguay: '巴拉圭',
              Peru: '秘鲁',
              Philippines: '菲律宾',
              Poland: '波兰',
              Portugal: '葡萄牙',
              'Puerto Rico': '波多黎各',
              Qatar: '卡塔尔',
              Reunion: '留尼旺岛',
              Romania: '罗马尼亚',
              Russia: '俄罗斯',
              Rwanda: '卢旺达',
              'San Marino': '圣马力诺',
              'Sao Tome and Principe': '圣多美和普林西比',
              'Saudi Arabia': '沙特阿拉伯',
              Senegal: '塞内加尔',
              Seychelles: '塞舌尔',
              'Sierra Leone': '塞拉利昂',
              Singapore: '新加坡',
              Slovakia: '斯洛伐克',
              Slovenia: '斯洛文尼亚',
              'Solomon Is.': '所罗门群岛',
              Somalia: '索马里',
              'South Africa': '南非',
              Spain: '西班牙',
              'Sri Lanka': '斯里兰卡',
              'St. Christopher-Nevis': '圣',
              'St. Lucia': '圣露西亚',
              'St. Vincent and the Grenadines': '圣文森特和格林纳丁斯',
              Sudan: '苏丹',
              Suriname: '苏里南',
              Svalbard: '斯瓦尔巴特群岛',
              Swaziland: '斯威士兰',
              Sweden: '瑞典',
              Switzerland: '瑞士',
              Syria: '叙利亚',
              Taiwan: '台湾',
              Tajikistan: '塔吉克斯坦',
              Tanzania: '坦桑尼亚',
              Thailand: '泰国',
              Togo: '多哥',
              Tonga: '汤加',
              'Trinidad and Tobago': '特里尼达和多巴哥',
              Tunisia: '突尼斯',
              Turkey: '土耳其',
              Turkmenistan: '土库曼斯坦',
              'Turks and Caicos Islands': '特克斯和凯科斯群岛',
              'Timor-Leste': '东帝汶',
              Uganda: '乌干达',
              Ukraine: '乌克兰',
              'United Arab Emirates': '阿联酋',
              'United Kingdom': '英国',
              'United States': '美国',
              Uruguay: '乌拉圭',
              Uzbekistan: '乌兹别克斯坦',
              Vanuatu: '瓦努阿图',
              Venezuela: '委内瑞拉',
              Vietnam: '越南',
              'W. Sahara': '西撒哈拉',
              'Western Samoa': '西萨摩亚',
              Yemen: '也门',
              Yugoslavia: '南斯拉夫',
              'Dem. Rep. Congo': '刚果民主共和国',
              Zambia: '赞比亚',
              Zimbabwe: '津巴布韦',
              'S. Sudan': '南苏丹',
              Somaliland: '索马里兰',
              Montenegro: '黑山',
              Kosovo: '科索沃',
              Serbia: '塞尔维亚'
            },
            data: this.colorMapData
          },
          {
            name: '散点',
            type: 'scatter',
            coordinateSystem: 'geo',
            data: this.convertData(this.data),
            // symbolSize: function(val) {
            //     return val[2] / 10;
            // },
            symbolSize: 10,
            label: {
              normal: {
                formatter: '{b}',
                position: 'right',
                show: false
              },
              emphasis: {
                show: true
              }
            },
            itemStyle: {
              normal: {
                color: '#fff'
              }
            }
          },
          {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'geo',
            zlevel: 6
          },
          {
            name: 'Top 5',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: this.convertData(
              this.data
                .sort(function (a, b) {
                  return b.value - a.value
                })
                .slice(0, 10)
            ),
            symbolSize: 20,
            showEffectOn: 'render',
            rippleEffect: {
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                formatter: '{b}',
                position: 'left',
                show: false
              }
            },
            itemStyle: {
              normal: {
                color: 'yellow',
                shadowBlur: 10,
                shadowColor: 'yellow'
              }
            },
            zlevel: 1
          }
        ]
      })
    }
  },
  mounted() {
    // this.$refs.demoMap.style.height = '700px'
    this.map()
  }
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
#demo {
  width: 100%;
  height: 100%;
  display: flex;
}
#demoMap {
  width: 68%;
  height: 716px;
  margin: 70px 0 13% 14%;
}
.rightTable {
  height: 240px;
  width: 400px;
  float: right;
  margin: 40px;
}
</style>
